<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">管理学生</div></el-col>
        <el-col :span="11" :offset="10" :xl="{span: 9, offset: 12}">
          <el-button v-if="this.menuList.includes('studentResetPassword')" type="primary" plain size="medium" class="dangerBtn" @click="resetPwssFn()">重置密码</el-button>
          <el-button v-if="this.menuList.includes('studentBatchDestroy')" type="primary" plain size="medium" class="dangerBtn" @click="delectsFn()">删除</el-button>
          <el-button v-if="this.menuList.includes('studentAddInfo')" type="primary" size="medium" @click="addStudent()">添加学生</el-button>
          <el-button v-if="this.menuList.includes('studentBatchImport')" type="primary" size="medium" @click="bulkImportt()">批量导入</el-button>
          <el-button v-if="this.menuList.includes('studentExport')" type="primary" plain size="medium" @click="exportFn()">导出</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <home-tab :tableData= "tableData" :tableConfig="tableConfig" :slotRow="true" @deleteSelect="goToDeleteSelect" @operation="goToOperation"/>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
    <!-- 新增学生 -->
    <add-student v-if="this.isAddStudent" :isAddStudent="this.isAddStudent" @noAddStudent="noAddStudent"></add-student>
    <!-- 编辑学生 -->
    <edit-student v-if="this.isEditStudent" :rows="this.rows" :isEditStudent="this.isEditStudent" @noEditStudent="noEditStudent"></edit-student>
    <!-- 批量导入 -->
    <bulk-import :isBulkImportt="this.isBulkImportt" @noBulkImportt="noBulkImportt"></bulk-import>
    <!-- 分发 -->
    <distribution v-if="isDistribution" :isDistribution="this.isDistribution" :distributionType="distributionType" :distributionType_range_object="distributionType_range_object" @noDistribution="noDistribution"></distribution>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import homeTab from '@/components/table.vue'
import addStudent from './student/addStudent.vue'
import editStudent from './student/editStudent.vue'
import bulkImport from './student/bulkImport.vue'
import distribution from '@/components/distribution/distribution.vue'
import {APISTUDENTLIST, APIALLLEARNINGPERIOD, APIALLLGRADE, APIALLCLASS, APIDELSTUDENT, APIDELSTUDENTS, APIRESETPASSWORDSTUDENTS} from '@/common/api.js'
export default {
  components: { homeTab, addStudent, editStudent, bulkImport, distribution },
  data () {
    return {
      api: '',
      menuList: [],
      isAddStudent: false,
      isEditStudent: false,
      isBulkImportt: false,
      isDistribution: false,
      distributionType: null,
      distributionType_range_object: null,
      configRow: ['', 'input', 'select', 'input', '', 'input', 'select', 'select', 'select', '', 'select', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        uid: '',
        real_name: '',
        sex_name: '',
        t_id: '',
        pwd: '',
        student_id: '',
        title: '',
        grade_name: '',
        class_name: '',
        birthday: '',
        flag_name: '',
        operation: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: true, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            modelValue: '',
            width: '200'
          },
          {
            label: '性别',
            prop: 'sex_name',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '男',
              id: 1
            }, {
              title: '女',
              id: 2
            }]
          },
          {
            label: '账号',
            prop: 't_id',
            align: 'center',
            width: '200',
            modelValue: ''
          },
          {
            label: '密码',
            prop: 'pwd',
            align: 'center',
            modelValue: ''
          },
          {
            label: '学籍号',
            prop: 'student_id',
            align: 'center',
            width: '200',
            modelValue: ''
          },
          {
            label: '学段',
            prop: 'title',
            align: 'center',
            width: '100',
            modelValue: '',
            optionsList: []
          },
          {
            label: '年级',
            prop: 'grade_name',
            align: 'center',
            width: '200',
            modelValue: '',
            optionsList: []
          },
          {
            label: '班级',
            prop: 'class_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '生日',
            prop: 'birthday',
            width: '150',
            align: 'center',
            modelValue: '',
            optionsList: [{
              label: 'hello1',
              value: 1
            }, {
              label: 'hello2',
              value: 2
            }]
          },
          {
            label: '状态',
            align: 'center',
            prop: 'flag_name',
            modelValue: '',
            optionsList: [{
              title: '在读',
              id: 1
            }, {
              title: '休学',
              id: 2
            }, {
              title: '离校',
              id: 3
            }]
          },
          {
            prop: 'operation',
            label: '操作',
            fixed: 'right',
            width: '200',
            list: [
              {id: 'archives', name: '个人档案'}
            ]
          }
        ]
      },
      form: {},
      rows: {},
      currentPage: 1,
      total: 0,
      page: 1,
      checkStr: '',
      limit: 10
    }
  },
  created () {
    this.Api = downloadApi
    this.selectFn()
    this.tableList()
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('studentUpdateDetail')) {
      var operation1 = {id: 'edit', name: '编辑'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('studentDispatch')) {
      var operation2 = {id: 'distribution', name: '分发'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    if (this.menuList.includes('studentDestroy')) {
      var operation3 = {id: 'delect', name: '删除', className: 'dangerTextBtn'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation3)
        }
      })
    }
  },
  methods: {
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    selectFn () {
      APIALLLEARNINGPERIOD().then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '学段') {
            element.optionsList = res.data
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '姓名') {
          this.form.real_name = element.modelValue
        }
        if (element.label === '性别') {
          this.form.sex = element.modelValue
        }
        if (element.label === '账号') {
          this.form.t_id = element.modelValue
        }
        if (element.label === '学籍号') {
          this.form.student_id = element.modelValue
        }
        if (element.label === '学段') {
          this.form.section_id = element.modelValue
        }
        if (element.label === '年级') {
          this.form.grade_id = element.modelValue
        }
        if (element.label === '班级') {
          this.form.class_id = element.modelValue
        }
        if (element.label === '状态') {
          this.form.flag = element.modelValue
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APISTUDENTLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') { // 搜素
        this.dataProcessing()
      } else if (val.id === 'del') { // 清除
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'edit') { // 编辑
        this.editStudent(val)
      } else if (val.id === 'delect') { // 修改
        this.delectFn(val)
      } else if (val.id === 'archives') { // 个人档案
        this.$router.push({path: './archives', query: { id: val.rows.uid }})
      } else if (val.id === 'distribution') {
        this.distribution(val)
      }
    },
    addStudent () { // 添加学生
      this.isAddStudent = true
    },
    noAddStudent (type) {
      this.isAddStudent = false
      if (type === 1) {
        this.tableList()
      }
    },
    editStudent (val) { // 编辑学生
      this.isEditStudent = true
      this.rows = val
    },
    noEditStudent (type) {
      this.isEditStudent = false
      if (type === 1) {
        this.tableList()
      }
    },
    delectFn (e) { // 删除
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELSTUDENT({
          uid: e.rows.uid
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delectsFn () { // 批量删除
      this.$confirm('此操作将永久删除这些学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELSTUDENTS({
          uids: this.checkStr
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    resetPwssFn () { // 批量删除
      this.$confirm('此操作将对这些学生重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIRESETPASSWORDSTUDENTS({
          uid: this.checkStr
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    bulkImportt () { // 批量导入
      this.isBulkImportt = true
    },
    noBulkImportt (type) {
      this.isBulkImportt = false
      if (type === 1) {
        this.tableList()
      }
    },
    distribution (e) { // 分发
      this.distributionType = 5
      this.distributionType_range_object = e.rows.uid
      this.isDistribution = true
    },
    noDistribution (type) {
      this.isDistribution = false
      if (type === 1) {
        this.tableList()
      }
    },
    exportFn () { // 导出
      window.location.href = this.Api + '/api/student/export?token=' + window.sessionStorage.getItem('token')
    }
  },
  computed: {
    newGrade () {
      let grade
      this.tableConfig.config.forEach(element => {
        if (element.label === '学段') {
          grade = element.modelValue
        }
      })
      return grade
    },
    newClass () {
      let newClass
      this.tableConfig.config.forEach(element => {
        if (element.label === '年级') {
          newClass = element.modelValue
        }
      })
      return newClass
    }
  },
  watch: {
    newGrade (newV, oldV) {
      APIALLLGRADE({
        section_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '年级') {
            element.optionsList = res.data
          }
          if (element.label === '年级') {
            element.modelValue = ''
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    newClass (newV, oldV) {
      APIALLCLASS({
        grade_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '班级') {
            element.optionsList = res.data
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
